"use client";

/**
 * /share/:id — PUBLIC shared view (no auth; middleware whitelists /share/).
 *
 * Data comes from the public endpoint GET /share/:token, which returns the
 * content inline (page blocks or a database's properties + records) plus a
 * `canComment` flag. There is no session, so nothing here is editable.
 *
 * Why not <BlockRenderer/> + <db-embedded/> directly: both are the *editable*
 * surfaces — BlockRenderer blocks mount a live Tiptap editor and auto-save via
 * /blocks/batch (→ 401 for an anonymous visitor), and db-embedded issues
 * authenticated queries. Exposing an editable surface publicly would be a
 * security footgun, so this page renders a deliberate **read-only**
 * presentation of the same data. (Flagged to the core agent: if a shared
 * read-only BlockRenderer mode is wanted, that's a core change.)
 */
import { useParams } from "next/navigation";
import { useQuery } from "@tanstack/react-query";
import { apiFetch, type ApiError } from "@/lib/api";
import { valueToText, type DatabaseProperty, type RecordValue } from "@/hooks/use-database";
import { formatRelativeTime } from "@/lib/utils";

// ---- public share payload (apps/api/src/modules/share/share.service.ts) ----
interface ShareBlock {
  id: string;
  type: string;
  content: unknown;
  properties: Record<string, unknown>;
  position: string;
}
interface ShareData {
  share: { id: string; scope: string; allowComments: boolean; expiresAt: string | null };
  workspace: { id: string; name: string; slug: string };
  canComment: boolean;
  target:
    | { type: "page"; page: { id: string; title: string; icon?: string | null; description?: string | null }; blocks: ShareBlock[] }
    | {
        type: "database";
        database: { id: string; title: string; icon?: string | null; description?: string | null };
        properties: { id: string; name: string; type: string; isTitle?: boolean }[];
        records: { id: string; properties: Record<string, unknown> }[];
      };
}

/** Recursively pull display text out of a Tiptap doc node. */
function extractText(node: unknown, depth = 0): string {
  if (depth > 12 || node == null) return "";
  if (typeof node === "string") return node;
  const n = node as { text?: string; content?: unknown[] };
  if (typeof n.text === "string") return n.text;
  if (Array.isArray(n.content)) return n.content.map((c) => extractText(c, depth + 1)).join("");
  return "";
}

function sortBlocks(blocks: ShareBlock[]): ShareBlock[] {
  return [...blocks].sort((a, b) => (a.position < b.position ? -1 : a.position > b.position ? 1 : 0));
}

function ShareBlockView({ block }: { block: ShareBlock }) {
  const text = extractText(block.content);
  const props = block.properties ?? {};

  switch (block.type) {
    case "heading_1":
      return <h1 className="mt-6 text-3xl font-bold">{text || "\u00A0"}</h1>;
    case "heading_2":
      return <h2 className="mt-5 text-2xl font-bold">{text || "\u00A0"}</h2>;
    case "heading_3":
      return <h3 className="mt-4 text-xl font-semibold">{text || "\u00A0"}</h3>;
    case "paragraph":
      return <p className="my-2 leading-relaxed whitespace-pre-wrap">{text}</p>;
    case "todo":
      return (
        <div className="my-1 flex items-start gap-2">
          <span
            className={`mt-1 flex size-4 shrink-0 items-center justify-center rounded border text-[10px] ${
              props.checked ? "border-emerald-500 bg-emerald-500 text-white" : "border-border"
            }`}
            aria-hidden
          >
            {props.checked ? "✓" : ""}
          </span>
          <span className={`leading-relaxed ${props.checked ? "text-muted-foreground line-through" : ""}`}>{text}</span>
        </div>
      );
    case "bulleted_list":
      return (
        <div className="my-1 flex gap-2">
          <span className="mt-[0.6em] size-1.5 shrink-0 rounded-full bg-foreground" aria-hidden />
          <span className="leading-relaxed">{text}</span>
        </div>
      );
    case "numbered_list":
      return (
        <div className="my-1 flex gap-2">
          <span className="w-5 shrink-0 text-right text-sm text-muted-foreground" aria-hidden>
            {(props.number as number) ?? "·"}
          </span>
          <span className="leading-relaxed">{text}</span>
        </div>
      );
    case "code":
      return (
        <pre className="my-3 overflow-x-auto rounded-md bg-muted p-3 text-sm">
          <code>{text}</code>
        </pre>
      );
    case "equation": {
      const latex = (props.latex as string) ?? text;
      return latex ? <pre className="my-3 overflow-x-auto rounded-md bg-muted p-3 font-mono text-sm">{latex}</pre> : null;
    }
    case "video":
    case "audio": {
      const url = (props.url as string) ?? (props.src as string) ?? "";
      if (!url) return null;
      return block.type === "video" ? (
        <video src={url} controls className="my-3 max-w-full rounded-md" />
      ) : (
        <audio src={url} controls className="my-3 w-full" />
      );
    }
    case "callout":
      return (
        <div className="my-3 flex gap-2 rounded-md border border-border bg-muted/30 p-3 text-sm">
          <span aria-hidden>{(props.icon as string) ?? "💡"}</span>
          <div className="leading-relaxed">{text}</div>
        </div>
      );
    case "quote":
      return <blockquote className="my-3 border-l-2 border-border pl-3 italic text-muted-foreground">{text}</blockquote>;
    case "divider":
      return <hr className="my-4 border-border" />;
    case "image": {
      const url = (props.url as string) ?? (props.src as string) ?? "";
      if (!url) return null;
      return (
        <img
          src={url}
          alt={text || (props.caption as string) || "image"}
          className="my-3 max-w-full rounded-md"
          loading="lazy"
        />
      );
    }
    case "database":
    case "linked_database":
    case "child_database":
      return (
        <div className="my-3 rounded-md border border-dashed p-3 text-sm text-muted-foreground">
          A database is embedded here — it isn't included in public shares.
        </div>
      );
    case "spacer": {
      const height = Math.min(Math.max((props.heightPx as number) ?? 32, 8), 200);
      return <div style={{ height }} aria-hidden />;
    }
    default:
      return text ? <p className="my-2 leading-relaxed">{text}</p> : null;
  }
}

function DatabaseTable({ data }: { data: Extract<ShareData["target"], { type: "database" }> }) {
  const cols = data.properties;
  return (
    <div className="overflow-x-auto rounded-md border border-border">
      <table className="w-full text-sm">
        <thead className="border-b border-border bg-muted/40 text-left">
          <tr>
            {cols.map((c) => (
              <th key={c.id} className="whitespace-nowrap px-3 py-2 font-medium">
                {c.name}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.records.length === 0 ? (
            <tr>
              <td colSpan={Math.max(cols.length, 1)} className="px-3 py-6 text-center text-muted-foreground">
                No records.
              </td>
            </tr>
          ) : (
            data.records.map((r) => (
              <tr key={r.id} className="border-b border-border last:border-0">
                {cols.map((c) => {
                  const v = r.properties[c.name];
                  const prop: DatabaseProperty = { id: c.id, name: c.name, type: c.type as DatabaseProperty["type"] };
                  return (
                    <td key={c.id} className="whitespace-nowrap px-3 py-2 align-top">
                      {valueToText(v as RecordValue, prop)}
                    </td>
                  );
                })}
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
}

export default function PublicSharePage() {
  const params = useParams<{ id: string }>();
  const token = params?.id ?? "";

  const q = useQuery({
    queryKey: ["public-share", token],
    queryFn: async (): Promise<ShareData> => {
      const res = (await apiFetch<ShareData>(`/share/${encodeURIComponent(token)}`, { noAuth: true })) as ShareData;
      return res;
    },
    enabled: token.length > 0,
    retry: false
  });

  if (q.isLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
        Loading shared content…
      </div>
    );
  }

  if (q.isError) {
    const code = q.error instanceof ApiError ? q.error.code : "";
    return (
      <div className="flex min-h-screen flex-col items-center justify-center gap-3 px-6 text-center">
        <div className="text-5xl" aria-hidden>
          🔒
        </div>
        <h1 className="text-xl font-semibold">
          {code === "NOT_FOUND" ? "This share link is no longer valid" : "Couldn't load this share"}
        </h1>
        <p className="max-w-sm text-sm text-muted-foreground">
          The link may have been revoked, expired, or the content deleted.
        </p>
      </div>
    );
  }

  const { target, workspace } = q.data;

  return (
    <main className="min-h-screen bg-background">
      <div className="mx-auto max-w-3xl px-6 py-10">
        {target.type === "page" ? (
          <>
            <header className="mb-6">
              <div className="flex items-center gap-2 text-3xl">
                {target.page.icon ? <span aria-hidden>{target.page.icon}</span> : null}
                <h1 className="text-3xl font-bold tracking-tight">{target.page.title || "Untitled"}</h1>
              </div>
              {target.page.description ? (
                <p className="mt-1 text-muted-foreground">{target.page.description}</p>
              ) : null}
            </header>
            <article>
              {sortBlocks(target.blocks).map((b) => (
                <ShareBlockView key={b.id} block={b} />
              ))}
            </article>
          </>
        ) : (
          <>
            <header className="mb-6">
              <div className="flex items-center gap-2 text-3xl">
                {target.database.icon ? <span aria-hidden>{target.database.icon}</span> : null}
                <h1 className="text-3xl font-bold tracking-tight">{target.database.title || "Database"}</h1>
              </div>
              {target.database.description ? (
                <p className="mt-1 text-muted-foreground">{target.database.description}</p>
              ) : null}
            </header>
            <DatabaseTable data={target} />
          </>
        )}

        <footer className="mt-12 border-t border-border pt-4 text-xs text-muted-foreground">
          Shared from {workspace.name}
          {q.data.share.expiresAt ? ` · expires ${formatRelativeTime(q.data.share.expiresAt)}` : ""}
        </footer>
      </div>
    </main>
  );
}